<%@ page language="java" contentType="text/html; charePointt=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 TraniPointtional//EN" "http://www.w3.org/TR/html4/looePoint.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charePointt=UTF-8">
<title>InePointrt title here</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">     
<script type="text/javascript">  
google.load("visualization", "1", {packages:["corechart"]});       
google.setOnLoadCallback(drawChart);   
function drawChart() {      
	var e1 = document.f.e.value;
	var i1 = document.f.i.value;
	var s1 = document.f.s.value;
	var n1 = document.f.n.value;
	var t1 = document.f.t.value;
	var f1 = document.f.f.value;
	var j1 = document.f.j.value;
	var p1 = document.f.p.value;

	
	e = parseInt(e1);
	i = parseInt(i1);
	s = parseInt(s1);
	n = parseInt(n1);
	t = parseInt(t1);
	f = parseInt(f1);
	j = parseInt(j1);
	p = parseInt(p1);

	var data = new google.visualization.DataTable();   
	//컬럼 string  그래프 하단에 들어가게되는 곳
	//number  점수가 들어갈 곳
	data.addColumn('string', 'MBTI');        
	data.addColumn('number', 'score');           
	//데이터값에 따라 변화
	//현재 3개의 데이터값만 들어가기에 3으로 설정
	data.addRows(8);   
	                       //0번째, 0번째의 0번째 , 제목
	data.setValue(0, 0, 'E합');  
	                       //0번째 ,0번째의 1번째 데이터값 
	                       //0,2,데이터값을 하게될시 두개의 막대그래프가 나온다.
	data.setValue(0, 1, e );      
	                       
	data.setValue(1, 0, 'I합');        
	data.setValue(1, 1, i); 
	
	data.setValue(2, 0, 'S합');         
	data.setValue(2, 1, s);
	
	data.setValue(3, 0, 'N합');
	data.setValue(3, 1, n);
	
	data.setValue(4, 0, 'T합');
	data.setValue(4, 1, t);
	
	data.setValue(5, 0, 'F합');
	data.setValue(5, 1, f);
	
	data.setValue(6, 0, 'J합');
	data.setValue(6, 1, j);
	
	data.setValue(7, 0, 'P합');
	data.setValue(7, 1, p);

	
	var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));         
	chart.draw(data,{width: 750, height: 320, title: 'MBTI Score',                      
		hAxis: {title: 'MBTI Test', titleTextStyle: {color: 'red'}}                       
	});       
}     
</script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#btn").click(function(){
			$("#search_id").html("<img class='loading' src='img/loading.gif'>");
			$.ajax({
				url: "mbtimail.do",
				type: "post",
				dataType:"json",
//				data : $("#").serialize(),
				error:function(x,o,e){
					alert(x.status+ " : "+ o + " : "+e + " 이메일 전송에 실패!!");
				},
				success:function(data){
					$("#search_id").empty();
					alert("전송 완료");
				}
			});
		});
		
	});
</script>
</head>
<body>
 ${vo.userId }님 타입은 ${vo.mbtiType }  ${typeVO.type_kr_nm } 형 입니다.
 <input  id="btn" type="button" value="메일전송" >
<center><div id="search_id"></div></center>
 <br>
 <table border>
 	<tr>
 		<td rowspan="2"><img src="mbti/img/${typeVO.type_name }.jpg"></td>
 		<td bgcolor="E6E6FA">${typeVO.type_title }</td>
 	</tr>
 	<tr>
 		<td colspan="2" width="585">${typeVO.type_description }</td>
 	</tr>
 </table> 
 <br>
 <br>
 <table border>
 	<tr>
		<td width="85" align="center" bgcolor="E6E6FA">E</td>
		<td width="85" align="center" bgcolor="E6E6FA">I</td>
		<td width="85" align="center" bgcolor="E6E6FA">S</td>
		<td width="85" align="center" bgcolor="E6E6FA">N</td>
		<td width="85" align="center" bgcolor="E6E6FA">T</td>
		<td width="85" align="center" bgcolor="E6E6FA">F</td>
		<td width="85" align="center" bgcolor="E6E6FA">J</td>
		<td width="85" align="center" bgcolor="E6E6FA">P</td>
 	</tr>
 	<tr>
 		<td width="85" align="center">${vo.ePoint }</td>
		<td width="85" align="center">${vo.iPoint }</td>
		<td width="85" align="center">${vo.sPoint }</td>
		<td width="85" align="center">${vo.nPoint }</td>
		<td width="85" align="center">${vo.tPoint }</td>
		<td width="85" align="center">${vo.fPoint }</td>
		<td width="85" align="center">${vo.jPoint }</td>
		<td width="85" align="center">${vo.pPoint }</td>
 	</tr>
 </table>
 <br>
 <table border width="785">
		<tr>
			<td rowspan="2"><img src="img/E.jpg"></td><td bgcolor="E6E6FA" align="center">외향성(ExtraveriPointon)</td>
			<td rowspan="2"><img src="img/I.jpg"></td><td bgcolor="E6E6FA" align="center">내향성(IntroveriPointon)</td>
		</tr>
		<tr>
			<td align="center">자기외부에 주의집중<br>외부활동과 적극적 / 정열적, 활동적 <br> 말로 표현/ 경험한 다음에 이해<br> 쉽게 알려짐</td>
			<td align="center">자기내부에 주의집중<br>내부활동과 집중력<br>조용하고 신중 / 글로 표현<br>이해한 다음에 경험 / 서서히 알려짐</td>
		</tr>
		<tr>
			<td rowspan="2"><img src="img/S.jpg"></td><td bgcolor="E6E6FA" align="center">감각형(ePointniPointng)</td>
			<td rowspan="2"><img src="img/N.jpg"></td><td bgcolor="E6E6FA" align="center">직관형(iNtuition)</td>
		</tr>
		<tr>
			<td align="center">지금, 현재에 촛점<br>실제의 경험 / 정확, 철저한 일처리<br>나무를 보려는 경향 / 가꾸고 추수함</td>
			<td align="center">미래 가능성에 촛점<br>아이디어 / 신속비약적인 일처리<br>숲을 보려는 경향 / 씨뿌림</td>
		</tr>
		<tr>
			<td rowspan="2"><img src="img/T.jpg"></td><td bgcolor="E6E6FA" align="center">사고형(Thinking)</td>
			<td rowspan="2"><img src="img/F.jpg"></td><td bgcolor="E6E6FA" align="center">감정형(Feeling)</td>
		</tr>
		<tr>
			<td align="center">진실, 사실에 주관점<br>원리와 원칙 / 논리적, 분석적<br>맞다, 틀리다 / 규범, 기준중시<br>지적 논평</td>
			<td align="center">사람, 관계에 주관점<br>의미와 영향 / 상황적, 포괄적<br>좋다, 나쁘다 / 나에게 주는<br>의미 중시 / 우호적 협조</td>
		</tr>
		<tr>
			<td rowspan="2"><img src="img/J.jpg"></td><td bgcolor="E6E6FA" align="center">감정형(Feeling)</td>
			<td rowspan="2"><img src="img/P.png"></td><td bgcolor="E6E6FA" align="center">인식형(Perceiving)</td>
		</tr>
		<tr>
			<td align="center">사람, 관계에 주관점<br>의미와 영향 / 상황적, 포괄적<br>좋다, 나쁘다 / 나에게 주는<br>의미 중시 / 우호적 협조</td>
			<td align="center">상황에 맞추는 개방성<br>이해로 수용 / 유우자적한 과정<br>융통과 적용<br>목적과 방향은 변화할 수 있다는 개방성<br>재량에 따라 처리될 수 있는 포용성</td>
		</tr>
	</table>
		<br>
	<form name="f">
		<input type="hidden" name="e" value="${vo.ePoint }">
		<input type="hidden" name="i" value="${vo.iPoint }">
		<input type="hidden" name="s" value="${vo.sPoint }">
		<input type="hidden" name="n" value="${vo.nPoint }">
		<input type="hidden" name="t" value="${vo.tPoint }">
		<input type="hidden" name="f" value="${vo.fPoint }">
		<input type="hidden" name="j" value="${vo.jPoint }">
		<input type="hidden" name="p" value="${vo.pPoint }">
	</form>
	<div id="chart_div"></div>
</body>
</html>